<template>
	<view :class="[BackGround]" :style="[{'font-weight':Style,'font-family':Font,height:100 + '%',minHeight:height + 'px'}]">
		<cu-custom bgColor="bg-gradual-blue" isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">消息信息</view>
		</cu-custom>
		<view :style="{minHeight: height - CustomBar + 'px'}" :class="[BackGroundBox]">
			<view :class="['padding-lr padding-tb-xs','marginTop:' + 100 + 'rpx']">
				<view style="font-size: 48rpx;">{{deliverplan.ltitle}}</view>
				<view class="flex solid-bottom justify-between margin-tb-xs padding-tb-xs">
					<view class="" v-if="isShow">安徽柠徽</view>
					<view v-else class="grid margin-bottom col-1" style="width:80%;transition: all 0.3s ease-in-out;">
						<!-- <view class="">发件人:123@123.com</view> -->
						<view class="flex padding-tb-xs cu-form-group">
							<view class="flex-twice title">发件人</view>
							<view class="flex-Nine">{{deliverplan.lmakeopid}}</view>
						</view>
						<view class="flex padding-tb-xs cu-form-group">
							<view class="flex-twice title">收件人</view>
							<view class="flex-Nine">{{userinfo.lusername}}</view>
						</view>
						<view class="flex padding-tb-xs cu-form-group">
							<view class="flex-twice title">时间</view>
							<view class="flex-Nine">{{deliverplan.lmakeopdate}}</view>
						</view>
					</view>
					<view class="text-bold" @tap="active">{{state}}</view>
				</view>
			</view>
			<view :class="['padding-lr padding-tb-xs',BackGroundBox]" v-html="deliverplan.linfo"></view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		getselectBulletin
	} from "@/service/selectList"
	export default {
		data() {
			return {
				height: this.screenHeight,
				CustomBar: uni.upx2px(this.CustomBar),
				dateleft: global.startbefore,
				dateright: global.dateright,
				userinfo: global.userinfo,
				isShow: true,
				deliverplan:[],
				state: '详情',
			}
		},
		computed: {
			...mapGetters([
				'Style', 'Font', 'BackGround', 'BackGroundBox'
			])
		},
		onLoad(option) {
			this.index = option.index
			this.dateleft = option.dateleft
			this.dateright = option.dateright
			getselectBulletin(this.dateleft, this.dateright,'12').then(res => {
				if (res.code != 0) {
					this.deliverplan = res.data[this.index]
				}
			})
		},
		methods: {
			active() {
				this.isShow = !this.isShow
				this.state = this.state == '详情' ? '隐藏' : '详情'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cu-form-group {
		border: none;
		margin-left: 0px;

		.title {
			min-width: calc(4.2em);
		}

	}
</style>
